<template>
	<div>
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
			<el-form-item label="顾客姓名" prop="customerName"><el-input v-model="dataForm.customerName" placeholder="消费者姓名"></el-input></el-form-item>
			<el-form-item label="电话" prop="customerTel"><el-input v-model="dataForm.customerTel" placeholder="电话"></el-input></el-form-item>
			<el-form-item label="每桌人数" prop="peopleNum"><el-input @input="inputCheck" v-model="dataForm.peopleNum" placeholder="人数"></el-input></el-form-item>
			<el-form-item label="预定时间" prop="reserveTime">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataForm.reserveTime" type="datetime" placeholder="预定时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="预定保留时间" prop="keepTime">
				<el-select v-model="dataForm.keepTime" placeholder="预定保留时间">
				    <el-option label="半个小时" value="0.5"> </el-option>
					<el-option label="一个小时" value="1"> </el-option>
					<el-option label="一个半小时" value="1.5"> </el-option>
					<el-option label="两个小时" value="2"> </el-option>
					<el-option label="两个半小时" value="2.5"> </el-option>
					<el-option label="三个小时" value="3"> </el-option>
					<el-option label="三个半小时" value="3.5"> </el-option>
					<el-option label="四个小时" value="4"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="押金" prop="depositStatus">
				<el-switch @change="changeDepositStatus" v-model="dataForm.depositStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
			</el-form-item>
			<el-form-item v-show="depositVisible" label="押金" prop="deposit"><el-input v-model="dataForm.deposit" placeholder="押金"></el-input></el-form-item>
			<el-form-item label="预定菜品" prop="reserveFoodStatus">
				<el-switch @change="changereserveFoodStatus" v-model="dataForm.reserveFoodStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
			</el-form-item>
			<el-form-item v-show="reserveFoodVisible" label="菜品集合" prop="foodList">
				<el-button icon="el-icon-plus" size="mini" type="success" @click="getFood">
					选择菜品
				</el-button>
			</el-form-item>
			<el-form-item v-show="reserveFoodVisible" label="菜品集合">
				<div v-for="item in dataForm.foodVos">
					{{ item.foodName }}/{{ item.foodNum }}份
					<font style="color: red;">￥{{ item.total }}元</font>
				</div>
				<div>
					总价：<font style="color: red;">￥{{ dataForm.totalMoney }}元</font>
				</div>
			</el-form-item>
			<el-form-item label="备注" prop="remark"><el-input v-model="dataForm.remark" placeholder="备注"></el-input></el-form-item>
		</el-form>
		<div style="text-align: center;">
			<!-- <el-button @click="visible = false">打印清单</el-button> -->
			<el-button type="primary" @click="dataFormSubmit()" :disabled="disabledSubmit">确定</el-button>
		</div>

		<FoodCom @DataList="selectFoods" v-show="FoodComponentVisible" ref="FoodComponentRef"></FoodCom>
	</div>
</template>

<script>
	import FoodCom from './FoodComponent.vue'
export default {
	components:{
		FoodCom
	},
	data() {
		return {
			disabledSubmit:false,
			visible: false,
			dataForm: {
				id: 0,
				sellerId: '',
				reserveNo: '',
				customerName: '',
				customerTel: '',
				peopleNum: '',
				time: '',
				keepTime: '',
				reserveTime:'',
				depositStatus: false,
				deposit: '',
				reserveFoodStatus: false,
				foodVos: [],
				deskId: '',
				status: '',
				remark: '',
				totalMoney:0,
				deskIdList:[]
			},
			dataRule: {
				sellerId: [{ required: true, message: '租户不能为空', trigger: 'blur' }],
				reserveNo: [{ required: true, message: '预定编号不能为空', trigger: 'blur' }],
				customerName: [{ required: true, message: '消费者姓名不能为空', trigger: 'blur' }],
				customerTel: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
				peopleNum: [{ required: true, message: '人数不能为空', trigger: 'blur' }],
				time: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
				keepTime: [{ required: true, message: '预定保留时间不能为空', trigger: 'blur' }],
				reserveTime: [{ required: true, message: '预定时间不能为空', trigger: 'blur' }],
				deskId: [{ required: true, message: '桌号不能为空', trigger: 'blur' }],
				status: [{ required: true, message: '状态(1正常2过期)不能为空', trigger: 'blur' }],

			},

			depositVisible:false,
			reserveFoodVisible:false,
			FoodComponentVisible:false,
		};
	},
	methods: {
		inputCheck(){
			if(isNaN(this.dataForm.peopleNum)){
				this.dataForm.peopleNum = ''
			}
		},

		getFood(){
			this.FoodComponentVisible = true
			this.$nextTick(() => {
				this.$refs.FoodComponentRef.getFoodList(0, null)
			})
		},

		getDeskIdList(deskIdList){
			this.dataForm.deskIdList = deskIdList
		},

		//菜品集合
		selectFoods(row){
			this.dataForm.foodVos = row.foodVos
			this.dataForm.totalMoney = row.totalMoney
		},

		changeDepositStatus() {
			if(this.dataForm.depositStatus === true){
				this.depositVisible = true
			}else{
				this.depositVisible = false
			}
		},

		changereserveFoodStatus(){
			if(this.dataForm.reserveFoodStatus === true){
				this.reserveFoodVisible = true
			}else{
				this.reserveFoodVisible = false
			}
		},

		init(id) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl(`/reception/tstorereservedesk/info/${this.dataForm.id}`),
						method: 'get',
						params: this.$http.adornParams()
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.dataForm.sellerId = data.tStoreReserveDesk.sellerId;
							this.dataForm.reserveNo = data.tStoreReserveDesk.reserveNo;
							this.dataForm.customerName = data.tStoreReserveDesk.customerName;
							this.dataForm.customerTel = data.tStoreReserveDesk.customerTel;
							this.dataForm.peopleNum = data.tStoreReserveDesk.peopleNum;
							this.dataForm.time = data.tStoreReserveDesk.time;
							this.dataForm.keepTime = data.tStoreReserveDesk.keepTime;
							this.dataForm.depositStatus = data.tStoreReserveDesk.depositStatus;
							this.dataForm.deposit = data.tStoreReserveDesk.deposit;
							this.dataForm.reserveFoodStatus = data.tStoreReserveDesk.reserveFoodStatus;
							this.dataForm.foodVos = data.tStoreReserveDesk.foodVos;
							this.dataForm.deskId = data.tStoreReserveDesk.deskId;
							this.dataForm.status = data.tStoreReserveDesk.status;
							this.dataForm.remark = data.tStoreReserveDesk.remark;
						}
					});
				}
			});
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					if(this.dataForm.deskIdList.length === 0){
						this.$message({
							message: '请选择餐桌',
							type: 'success',
							duration: 1500,
						});
					}else{
						this.disabledSubmit = true
						this.$http({
							url: this.$http.adornUrl(`/reception/tstorereservedesk/${!this.dataForm.id ? 'save' : 'update'}`),
							method: 'post',
							data: this.$http.adornData({
								id: this.dataForm.id || undefined,
								sellerId: this.dataForm.sellerId,
								reserveNo: this.dataForm.reserveNo,
								customerName: this.dataForm.customerName,
								customerTel: this.dataForm.customerTel,
								peopleNum: this.dataForm.peopleNum,
								time: this.dataForm.time,
								keepTime: this.dataForm.keepTime,
								depositStatus: this.dataForm.depositStatus?1:2,
								deposit: this.dataForm.deposit,
								reserveFoodStatus: this.dataForm.reserveFoodStatus?1:2,
								foodVos: this.dataForm.foodVos,
								deskId: this.dataForm.deskId,
								status: this.dataForm.status,
								deskIdList: this.dataForm.deskIdList,
								reserveTime: this.dataForm.reserveTime,
								totalMoney: this.dataForm.totalMoney,
								remark: this.dataForm.remark
							})
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
								});
								this.disabledSubmit = false
								this.dataForm = {}
								this.$emit('refreshDataList');
							} else {
								this.$message.error(data.msg);
							}
						});
					}

				}
			});
		}
	}
};
</script>
